<template>
  <div class="package-wrap">
    <h2>预装R包</h2>
    <el-input
      type="textarea"
      rows="6"
      class="input-bgc"
      style="width: 400px"
      v-model="preRunEnv"
      placeholder="请输入包名后点击提交，若多个环境包，请换行区分"
    ></el-input>
    <div class="btn-wrap">
      <el-button @click="$router.back()">返回</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  reqGetAppPreRunEnv,
  reqSavePreRunEnv,
} from '@/pages/member/api/flowapp.ts'
import { reqSavePreRunEnvBody } from '@/pages/member/api/types/flowapp'
import { MsgSuccess } from '@/utils/utils.ts'
const router = useRouter()

const props = defineProps<{
  appId: string
}>()

onMounted(() => getAppPreRunEnv())

const preRunEnv = ref('')

const getAppPreRunEnv = async () => {
  let resp = await reqGetAppPreRunEnv(props.appId)
  if (resp.code === 0) {
    preRunEnv.value = resp.data.join('\n')
  }
}

// 提交预装软件
const onSubmit = async () => {
  const reqData: reqSavePreRunEnvBody = {
    applicationId: props.appId,
    installCommandPath: preRunEnv.value.split('\n'),
  }
  const resp = await reqSavePreRunEnv(reqData)
  if (resp.code === 0) {
    MsgSuccess('提交成功')
    getAppPreRunEnv()
    router.push('/member/flowapp')
  }
}
</script>

<style scoped lang="scss">
.package-wrap {
  > h2 {
    margin-bottom: 38px;
    font-size: 20px;
    font-weight: bold;
    color: #021429;
  }

  .btn-wrap {
    margin-top: 26px;
  }
}
</style>
